<template>
  <div class="exchange">
    <div class="flex between baselight2 ptb20 plr20 ft16 bgheader">
      <span>Exchange</span>
    </div>
    <div class="mt20 plr30">
      <div class="flex alcenter mb20 wt500 pop">
        <div class="flex alcenter flex1 wt100 r-left">
          <div class="el-select flex1 selectBor bdinput">
            <!---->
            <div class="el-input el-input--suffix">
              <!----><input
                type="text"
                readonly="readonly"
                autocomplete="off"
                placeholder=""
                class="el-input__inner"
              /><!----><span class="el-input__suffix"
                ><span class="el-input__suffix-inner"
                  ><i
                    class="el-select__caret el-input__icon el-icon-arrow-up"
                  ></i
                  ><!----><!----><!----><!----><!----></span
                ><!----></span
              ><!----><!---->
            </div>
          </div>
        </div>
        <div class="flex alcenter r-center">
          <img
            src=""
            alt=""
            class="imgct"
          />
        </div>
        <div class="flex alcenter flex1 r-right">
          <div class="el-select flex1 selectBor bdinput">
            <!---->
            <div class="el-input el-input--suffix">
              <!----><input
                type="text"
                readonly="readonly"
                autocomplete="off"
                placeholder=""
                class="el-input__inner"
              /><!----><span class="el-input__suffix"
                ><span class="el-input__suffix-inner"
                  ><i
                    class="el-select__caret el-input__icon el-icon-arrow-up"
                  ></i
                  ><!----><!----><!----><!----><!----></span
                ><!----></span
              ><!----><!---->
            </div>
            <div
              class="el-select-dropdown el-popper"
              style="display: none; min-width: 200px"
            >
              <div class="el-scrollbar" style="">
                <div
                  class="el-select-dropdown__wrap el-scrollbar__wrap el-scrollbar__wrap--hidden-default"
                >
                  <ul class="el-scrollbar__view el-select-dropdown__list">
                    <!---->
                    <li class="el-select-dropdown__item"><span>BTC</span></li>
                    <li class="el-select-dropdown__item"><span>ETH</span></li>
                    <li class="el-select-dropdown__item"><span>EOS</span></li>
                    <li class="el-select-dropdown__item"><span>LTC</span></li>
                    <li class="el-select-dropdown__item"><span>BCH</span></li>
                    <li class="el-select-dropdown__item"><span>UNI</span></li>
                    <li class="el-select-dropdown__item"><span>SOL</span></li>
                    <li class="el-select-dropdown__item"><span>USD</span></li>
                    <li class="el-select-dropdown__item"><span>SAND</span></li>
                    <li class="el-select-dropdown__item"><span>AXS</span></li>
                    <li class="el-select-dropdown__item"><span>USDC</span></li>
                    <li class="el-select-dropdown__item"><span>ZZT</span></li>
                    <li class="el-select-dropdown__item"><span>RCBR</span></li>
                    <li class="el-select-dropdown__item"><span>ZCT</span></li>
                    <li class="el-select-dropdown__item"><span>AVAX</span></li>
                    <li class="el-select-dropdown__item"><span>DCEP</span></li>
                    <li class="el-select-dropdown__item"><span>XAU</span></li>
                  </ul>
                </div>
                <div class="el-scrollbar__bar is-horizontal">
                  <div
                    class="el-scrollbar__thumb"
                    style="transform: translateX(0%)"
                  ></div>
                </div>
                <div class="el-scrollbar__bar is-vertical">
                  <div
                    class="el-scrollbar__thumb"
                    style="transform: translateY(0%)"
                  ></div>
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
      </div>
      <div class="flex alcenter wt500 mb40 duih mt40">
        <span class="wt100">Exchange quantity:</span>
        <input type="text" class="ht40 lh40 plr20 bdinput flex1 baselight2" />
        <p class="quanb">Exchange all</p>
      </div>
      <div class="text-flex wt500">
        <div class="top child">
          <span>Current exchange rate</span> <span>Available</span>
          <span>Expected to get</span>
        </div>
        <div class="bottom child">
          <span>87503.391</span> <span>0.00000000</span> <span>0.00000000</span>
        </div>
      </div>
      <div class="btn mt30 radius2 tc ht48 lh48 wt217 white bgblue">
        Exchange
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm:{}
    };
  },
  methods: {
    refresh(){

    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped></style>
